<template>
  <div class="member-foot">
    <!-- 顶部标题 -->
    <div class="xtx-center-head">
      <h4 class="title fl">我的足迹</h4>
      <a class="add fr" href="javascript:;" @click="del('all')">清除全部</a>
    </div>
    <!-- 我的足迹 -->
    <transition name="load">
    <div
      key="list"
      class="xtx-footprint-list"
      v-if="today.items.length||yesterday.items.length||longtimeago.items.length"
    >
      <div class="item">
        <div class="line active"></div>
        <div class="goods">
          <p class="time">
            <span>今天</span>
            <a href="javascript:;" @click="del('today')" v-if="today.items.length">删除</a>
          </p>
          <ul>
            <li v-for="item in today.items" :key="item.id">
              <i class="close iconfont icon-guanbi" @click="del('today',item.id)"></i>
              <a href="#">
                <img :src="item.picture" alt />
                <p class="name">{{item.name}}</p>
                <p class="desc">{{item.desc}}</p>
                <p class="price">¥{{item.price}}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="item">
        <div class="line"></div>
        <div class="goods">
          <p class="time">
            <span>昨天</span>
            <a v-if="yesterday.items.length" @click="del('yesterday')" href="javascript:;">删除</a>
          </p>
          <ul>
            <li v-for="item in yesterday.items" :key="item.id">
              <i class="close iconfont icon-guanbi" @click="del('yesterday',item.id)"></i>
              <a href="#">
                <img :src="item.picture" alt />
                <p class="name">{{item.name}}</p>
                <p class="desc">{{item.desc}}</p>
                <p class="price">¥{{item.price}}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="item">
        <div class="line"></div>
        <div class="goods">
          <p class="time">
            <span>更早之前</span>
            <a class="red" v-if="longtimeago.items.length" @click="del('longtimeago')" href="javascript:;">删除</a>
          </p>
          <ul>
            <li v-for="item in longtimeago.items" :key="item.id">
              <i class="close iconfont icon-guanbi" @click="del('longtimeago',item.id)"></i>
              <a href="#">
                <img :src="item.picture" alt />
                <p class="name">{{item.name}}</p>
                <p class="desc">{{item.desc}}</p>
                <p class="price">¥{{item.price}}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
        <!-- 加载更多 -->
        <infinite-loading v-if="firstLoaded" @infinite="getItems" :distance="100" spinner="waveDots">
          <div slot="no-more" style="color:#999;padding:22px">
            <p>已到最后，只保存最近 1 个月的浏览记录</p>
          </div>
        </infinite-loading>
    </div>
    <!-- 没有内容 -->
    <div key="none" class="xtx-center-none" v-else-if="firstLoaded">
      <img src="@/assets/images/none.png" alt="">
      <p>抱歉，当前无浏览足迹记录</p>
    </div>
    <!-- 加载中.. -->
    <div key="load" class="skeleton" v-else>
      <xtx-skeleton width="100px" height="24px"></xtx-skeleton>
      <xtx-skeleton width="100%" height="30px"></xtx-skeleton>
      <xtx-skeleton width="100%" height="240px"></xtx-skeleton>
    </div>
    </transition>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import InfiniteLoading from 'vue-infinite-loading'
export default {
  name: 'member-foot',
  components: { InfiniteLoading },
  data () {
    return {
      reqParams: {
        page: 0,
        pageSize: 10
      },
      today: {
        name: '今天',
        items: []
      },
      yesterday: {
        name: '昨天',
        items: []
      },
      longtimeago: {
        name: '更早以前',
        items: []
      },
      firstLoaded: false,
      dateMap: {
        all: 4,
        today: 1,
        yesterday: 2,
        longtimeage: 3
      }
    }
  },
  created () {
    this.getItems()
  },
  methods: {
    async getItems ($state) {
      await this.$sleep(1000)
      this.reqParams.page++
      const { data } = await this.$http.get('member/browseHistory', { params: this.reqParams })
      this.firstLoaded = true
      if (data.result.items.length) {
        const today = dayjs().hour(0).minute(0).second(0).millisecond(0)
        const yesterday = today.subtract(1, 'day')
        data.result.items.forEach(item => {
          if (dayjs(item.browserTime).isBefore(today)) {
            if (dayjs(item.browserTime).isBefore(yesterday)) {
              this.longtimeago.items.push(item)
            } else {
              this.yesterday.items.push(item)
            }
          } else {
            this.today.items.push(item)
          }
        })
        $state && $state.loaded()
      } else {
        $state && $state.loaded()
        $state && $state.complete()
      }
    },
    del (type, id) {
      this.$confirm({ text: '您确认删除这些足迹吗？' }).then(async (valid) => {
        if (valid) {
          const data = {}
          if (this.dateMap[type] && id === undefined) {
            data.dateType = this.dateMap[type]
          } else {
            data.ids = [id]
          }
          await this.$http({
            method: 'delete',
            url: 'browseHistory/batch',
            data
          })
          this.$message({ message: '删除足迹成功', type: 'success' })
          if (type === 'all') {
            this.today.items = []
            this.yesterday.items = []
            this.longtimeago.items = []
          } else if (type !== undefined && id !== undefined) {
            const index = this[type].items.findIndex(item => item.id === id)
            this[type].items.splice(index, 1)
          } else {
            this[type].items = []
          // 可能存在当前未加载的足迹，无法删除。所以再次加载看看是否有数据。
          // this.reqParams.page = 1
          // this.firstLoaded = false
          // this.getItems()
          }
        }
      }).catch(e => {
        this.$message({ message: '删除足迹失败', type: 'error' })
      })
    }
  }
}
</script>

<style scoped lang='less'>
@import './styles/index.less';
.member-foot {
  position: relative;
}
.skeleton {
  padding: 20px 40px;
  .xtx-skeleton {
    margin-top: 20px;
  }
}
</style>
